/*
 * @Author: xianfuyou
 * @Date: 2022-03-29 11:36:35
 * @LastEditors: your name
 * @LastEditTime: 2022-04-08 09:05:46
 * @Description: file content
 */
import React, { useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ButtonWarpCpn from '../../components/CommBtn/CommBtn'
import ButtontopLists from '../../components/OrderCpn/ButtontopLists';
import DelFollowModel from '../../components/OrderCpn/DelFollowModel'
import AccessoryModelFollow from '../../components/OrderCpn/AccessoryModelFollow'
import Mypagination from '../../components/myPagination/MyPagination';

import {
  Row,
  Col,
  Form,
  Input,
  Select,
  DatePicker,
  Table,
  Tag
} from 'antd'
import { SettingOutlined, PlusCircleOutlined, CloudDownloadOutlined, EditFilled, DeleteFilled, QuestionCircleFilled, CheckCircleFilled, DownOutlined, UpOutlined } from '@ant-design/icons';
import './FollowOrderManage.css'
import ModifyFollow from './ModifyFollow/ModifyFollow';


// 填充表单数据
const data = [{
  key: 1,
  clientName: `xianfuyou`,
  followType: `电话跟进`,
  followStatus: `有意向`,
  followObject: `富贵`,
  followHint: 0,
  nextTimeStart: ` `,
  remark: '123123213213213213123',
  followPerson: `超级管理员`,
  followDateStart: `2022-03-30 16:12`,
  followManager: `2022-03-30`,
}, {
  key: 2,
  clientName: `xianfuyou`,
  followType: `电话跟进`,
  followStatus: `有意向`,
  followObject: `富贵`,
  followHint: 1,
  nextTimeStart: `2022-03-30 16:12`,
  remark: '123123213213213213123',
  followPerson: `超级管理员`,
  followDateStart: `2022-03-30 16:12`,
  followManager: `2022-03-30`,
}, {
  key: 3,
  clientName: `xianfuyou`,
  followType: `电话跟进`,
  followStatus: `有意向`,
  followObject: `富贵`,
  followHint: 1,
  nextTimeStart: `2022-03-30 16:12`,
  remark: '123123213213213213123',
  followPerson: `超级管理员`,
  followDateStart: `2022-03-30 16:12`,
  followManager: `2022-03-30`,
},];


// 跟单管理
function FollowOrderManage() {
  // 创建一个头部左侧按钮渲染列表
  const [buttonTopLists, setButtonTopLists] = useState([
    {
      text: "跟单列表",
      count: 1
    },
    {
      text: "今日需跟进",
      count: 1
    },
    {
      text: "本周需跟进",
      count: 1
    },
    {
      text: "今日记录",
      count: 1
    },
    {
      text: "本周记录",
      count: 1
    },
    {
      text: "本月记录",
      count: 1
    },
  ])
  // 分页的数据  // 总条数
  const [page, setPage] = useState(1)
  const [size, setSize] = useState(5)
  const [count, setCount] = useState(null)
  // 跟单列表
  const [followLists, setFollowLists] = useState(data)
  // 默认选中按钮
  const [currentBtn, setCurrentBtn] = useState(0)
  // 保存当前选中的对象
  const [followNowVal, setFollowNowVal] = useState({})
  // 是否显示高级搜索
  const [isHighSearch, setIsHighSearch] = useState(true)
  // 控制备注显示隐藏
  const [remarkState, setRemarkState] = useState(false)
  // 控制附件显示隐藏model框
  const [accessoryState, setAccessoryState] = useState(false)
  // 控制删除跟单显示隐藏model框
  const [delFollow, setDelFollow] = useState(false)

  // 定位表单控件
  const [form] = Form.useForm()

  const navigate = useNavigate()
  // 选中按钮的点击事件
  const clickChangeBtn = (index) => {
    console.log('currentBtn', index)
    setCurrentBtn(index)
  }

  // 点击备注显示全部
  const isShowRemork = () => {
    setRemarkState(!remarkState)
  }

  const followOrder = (obj) => {
    console.log('obj---====', obj)
    return <>
      <span style={{ "marginRight": "5px" }}>备注</span>
      {obj ?
        <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#c9c9c9">已省略</ButtonWarpCpn> :
        <ButtonWarpCpn onClick={isShowRemork} size="small" bgcolor="#52a069">显示全部</ButtonWarpCpn>}
    </>
  }

  const renderFollow = (message, state) => {
    console.log("message", message, "state", state)
    let resRemark = state ? message.substring(0, 5) + '...' : message
    return resRemark
  }

  // 跟单表单配置
  const followtable = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      key: 'clientName',
      width: 100,
      render: (clientName, record) => <span className={record.followHint === 0 ? 'resFollow' : ''} style={{ color: '#2299dd' }}>{clientName}</span>
    },
    {
      title: '跟单方式',
      dataIndex: 'followType',
      key: 'followType',
      width: 100,
    },
    {
      title: '跟单状态',
      dataIndex: 'followStatus',
      key: 'followStatus',
      width: 100,
    },
    {
      title: '跟单对象',
      dataIndex: 'followObject',
      key: 'followObject',
      width: 100,
    },
    {
      title: '跟单提示',
      dataIndex: 'followHint',
      key: 'followHint',
      width: 80,
      render: (orderStatus) => {
        const temp = orderStatus === 0 ?
          <Tag color="#948a8a" icon={<QuestionCircleFilled />}>结束跟单</Tag> :
          orderStatus === 1 ? <Tag color="#e0405a" icon={<QuestionCircleFilled />}>待跟单</Tag> :
            <Tag color="#009966" icon={<CheckCircleFilled />}>已跟单</Tag>
        return temp
      }
    },
    {
      title: '下次联系',
      dataIndex: 'nextTimeStart',
      key: 'nextTimeStart',
      width: 150,
      render: (nextTimeStart, record) => {
        return <span style={{ 'color': "#f20000" }}>{nextTimeStart}</span>
      }
    },
    {
      title: followOrder(remarkState),
      dataIndex: 'remark',
      key: 'remark',
      render: (remark) => {
        return renderFollow(remark, remarkState)
      }
    },
    {
      title: '跟单人',
      dataIndex: 'followPerson',
      key: 'followPerson',
      width: 100
    },
    {
      title: '跟单时间',
      dataIndex: 'followDateStart',
      key: 'followDateStart',
      width: 150,
    },
    // {
    //   title: '附件',
    //   dataIndex: 'accessory',
    //   key: 'accessory',
    //   width: 80,
    //   render: (accessory, record) => {
    //     const temp = accessory.length === 0 ?
    //       <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#dddddd">无附件</ButtonWarpCpn> :
    //       <ButtonWarpCpn onClick={() => { changeAccessory(record) }} size="small" bgcolor="#488dc9">附件<span>({accessory.length})</span></ButtonWarpCpn>
    //     return temp
    //   }
    // },
    {
      title: '管理',
      key: 'followManager',
      dataIndex: 'followManager',
      width: 180,
      render: (followManager, record) => {
        return <Col className="managerBtn">
          <ButtonWarpCpn size="small" bgcolor="#3782c3" icon={<EditFilled />} onClick={() => { modifyFollow(record) }}>修改</ButtonWarpCpn>
          <ButtonWarpCpn size="small" bgcolor="#ff0000" icon={<DeleteFilled />} onClick={() => { changeDelOrder(record) }}>删除</ButtonWarpCpn>
        </Col>
      },
    },
  ]
  // 获取当前点击的顶部按钮的数据
  const getFollowNowLists = (res) => {
    console.log('getFollowNowLists', res)
  }

  // 显示隐藏表单
  const showHiddenForm = () => {
    setIsHighSearch(!isHighSearch)
  }
  // 表单部分
  // 提交表单获取表单内容
  const onFinish = (values) => {
    const resValues = {
      ...values,
      "followDateStart": values['followDateStart'] && values['followDateStart'].format('YYYY-MM-DD HH:mm:ss'),
      "followDateEnd": values['followDateEnd'] && values['followDateEnd'].format('YYYY-MM-DD HH:mm:ss'),
      "nextTimeStart": values['nextTimeStart'] && values['nextTimeStart'].format('YYYY-MM-DD HH:mm:ss'),
      "nextTimeEnd": values['nextTimeEnd'] && values['nextTimeEnd'].format('YYYY-MM-DD HH:mm:ss')
    }
    console.log('resValues', resValues);
  };
  // 重置表单
  const onReset = () => {
    form.resetFields();
  };

  // 附件弹窗的事件
  // const changeAccessory = (orderVal) => {
  //   setFollowNowVal(orderVal)
  //   setAccessoryState(true)
  // }
  // 跟单修改
  const modifyFollow = (orderVal) => {
    navigate('/followOrder/modifyfollow', { state: { followInfo: orderVal } })
  }

  // 跟单删除
  const changeDelOrder = (orderVal) => {
    setFollowNowVal(orderVal)
    setDelFollow(true)
  }

  // 切换页码
  const changePage = (res) => {
    console.log('新页码', res)
    setPage(res)
  }

  return (
    <div className={"follow"}>
      {/* 附件弹窗事件
      <AccessoryModelFollow nowStatus={followNowVal} isShow={accessoryState} pHandleOk={(res) => { setAccessoryState(res) }} pHandleCancel={(res) => { setAccessoryState(res) }}></AccessoryModelFollow> */}
      {/* 删除弹窗 */}
      <DelFollowModel followId={followNowVal.key} isShow={delFollow} pHandleOk={(res) => { setDelFollow(res) }} pHandleCancel={(res) => { setDelFollow(res) }}></DelFollowModel>
      {/* 顶部导航及搜索 */}
      <Row justify={'space-between'} align={'middle'} className={'top'}>
        <Col span={18}>
          <Row align={'middle'}>
            {/* 顶部左侧按钮 */}
            <Col className="buttonTopLeft">
              {/* {
                buttonTopLists.map((item, index) => {
                  return <ButtonWarpCpn bgcolor={currentBtn === index ? "#f56659" : "#488dc9"} key={index} onClick={() => { clickChangeBtn(index) }}>{item.text}<span className="text">{item.count}</span></ButtonWarpCpn>
                })
              } */}
              <ButtontopLists
                getFollowNowLists={getFollowNowLists}
                lists={[
                  {
                    text: "跟单列表",
                    count: 5
                  },
                  {
                    text: "今日需跟进",
                    count: 1
                  },
                  {
                    text: "本周需跟进",
                    count: 1
                  },
                  {
                    text: "今日记录",
                    count: 1
                  },
                  {
                    text: "本周记录",
                    count: 1
                  },
                  {
                    text: "本月记录",
                    count: 1
                  },
                ]}></ButtontopLists>
              <ButtonWarpCpn bgcolor="#5c7b9a" icon={<CloudDownloadOutlined />}>数据导出</ButtonWarpCpn>
              <ButtonWarpCpn onClick={() => { navigate('/followOrder/addfollowOrder') }} bgcolor="#149e83" icon={<PlusCircleOutlined />}>新增跟单</ButtonWarpCpn>
            </Col>
            {/* 自定义设置 */}
            <Col className="buttonTopSet">
              <ButtonWarpCpn bgcolor="#e63636" icon={<SettingOutlined />}>自定义设置</ButtonWarpCpn>
            </Col>
          </Row>
        </Col>
        <Col span={6}>
          <Row justify={'end'} align={"middle"}>
            {/* 顶部右侧选择框 */}
            <Col className="inputTopSearch">
              <Input placeholder="客户名称 手机号 跟单" title="客户名称 手机号 跟单对象" />
            </Col>
            <Col className="buttonTopRight">
              <ButtonWarpCpn bgcolor="#2396b2">搜索</ButtonWarpCpn>
              {/* 切换搜索状态 */}
              {
                isHighSearch ?
                  <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}>高级搜索<UpOutlined /></ButtonWarpCpn> :
                  <ButtonWarpCpn bgcolor="#cc2626" onClick={() => { showHiddenForm() }}>高级搜索<DownOutlined /></ButtonWarpCpn>
              }
            </Col>
          </Row>
        </Col>
      </Row>
      {/* 高级搜索表单部分 */}
      {
        isHighSearch ? (
          <Row className={'highFrom'}>
            <Col className={"flag"} span={24}>
              <Row justify={'space-between'} align={'middle'}>
                <Col span={24}>
                  <Form
                    labelCol={{
                      span: 8,
                    }}
                    wrapperCol={{
                      span: 16,
                    }}
                    form={form} name="control-ref" onFinish={onFinish}
                  >
                    {/* 高级搜索表单部分 */}
                    <Row className="fromDataSection" justify={'space-around'}>
                      <Col span={6}>
                        <Form.Item label="编号" name="id">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="跟单方式" name="followType">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="跟单时间" style={{ marginBottom: 0 }}>
                          <Form.Item name="followDateStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="followDateEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="客户名称" name="clientName">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="跟单状态" name="followStatus">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item label="跟单人" name="followPerson">
                          <Select size="small">
                            <Select.Option value="demo">Demo</Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="跟单对象" name="followObject">
                          <Input size="small" />
                        </Form.Item>
                        <Form.Item label="下次联系" style={{ marginBottom: 0 }}>
                          <Form.Item name="nextTimeStart"
                            style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
                          >
                            <DatePicker size="small" />
                          </Form.Item>
                          <span
                            style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
                          >
                            -
                          </span>
                          <Form.Item name="nextTimeEnd" style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
                            <DatePicker size="small" />
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="备注" name="remark">
                          <Input size="small" />
                        </Form.Item>
                      </Col>
                    </Row>
                    {/* 按钮部分 */}
                    <Row className="formSearch" justify={'center'} align={'middle'}>
                      <Col>
                        <Form.Item>
                          {/* 高级搜索处理部分 */}
                          <Col className="formSearchItem">
                            <ButtonWarpCpn bgcolor="#49b377" type="primary" htmlType="submit">立即搜索</ButtonWarpCpn>
                            <ButtonWarpCpn bgcolor="#505050" htmlType="button" onClick={onReset}>清空条件</ButtonWarpCpn>
                            <ButtonWarpCpn bgcolor="#b1b3b2" htmlType="button" onClick={onReset}>导出数据</ButtonWarpCpn>
                          </Col>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </Col>
              </Row>
            </Col>
          </Row>
        ) : <></>
      }
      {/* 表格部分内容 */}
      <Row className="tableMessage">
        <Col span={24}>
          <Table
            pagination={{
              defaultCurrent: 2,
              pageSize: 5,
              showSizeChanger: true,
              pageSizeOptions: [2, 3, 4, 5]
            }}
            size="small"
            columns={followtable}
            dataSource={followLists}
            rowClassName={(record, index) => record.followHint === 0 ? 'resFollow' : ''}
            scroll={{ x: 1400 }} />
        </Col>
      </Row>
      <Row justify={'end'} align={'middle'}>
        <Mypagination page={1} size={10} count={23} changePage={changePage}></Mypagination>
      </Row>
    </div>
  )
}

export default FollowOrderManage